import { Pie } from "@ant-design/plots";
import baseUrl from '@/config';
import { useState, useEffect } from "react";

export const PieBox = () => {

  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();

    // Set up a polling interval (每600s=10分钟)
    const intervalId = setInterval(asyncFetch, 6000 * 100); // Adjust the interval as needed

    // Clean up the interval when the component unmounts
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  const asyncFetch = () => {
    fetch(
      // "https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json"
      baseUrl + "/sys/zoneBikeSummary/getZoneBikePie"
    )
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log("fetch data failed", error);
      });
  };

  const config = {
    appendPadding: 10,
    data,
    angleField: "value",
    colorField: "type",
    radius: 0.8,
    label: {
      type: "outer",
      content: "{name} {percentage}",
    },
    interactions: [
      {
        type: "pie-legend-active",
      },
      {
        type: "element-active",
      },
    ],

  };
  return <Pie style={{ height: "99%" }} {...config} />;
};

export default PieBox;
